<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/echarts.js"></script>
		<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
	</head>
	<body>
		<div id="main" style="margin-top: 20px; width: 100%;height:500px;"></div>
		<script type="text/javascript">
			$.ajax({
				url: "http://localhost:8181/bike/pie",
				type: "GET",
				dataType: "json", // 指定预期的服务器响应数据类型
				success: function(response) {
					// 基于准备好的dom，初始化echarts实例
					var myChart = echarts.init(document.getElementById('main'));

					var option = {
						title: {
							text: '单车使用时长',
							x: 'center'
						},
						tooltip: {
							trigger: 'item',
							formatter: "{a} <br/>{b} : {c} ({d}%)"
						},
						legend: {
							orient: 'vertical',
							left: 'left',
							data: response
						},
						series: [
							{
								name: '单车使用时长(占比)',
								type: 'pie',
								radius: '55%',
								center: ['50%', '60%'],
								data: response,
								itemStyle: {
									emphasis: {
										shadowBlur: 10,
										shadowOffsetX: 0,
										shadowColor: 'rgba(0, 0, 0, 0.5)'
									}
								},
								animationType: 'scale',
								animationEasing: 'elasticOut',
								animationDelay: function (idx) {
								  return Math.random() * 200;
								}
							}
						]
					}
					// 使用刚指定的配置项和数据显示图表。
					myChart.setOption(option);
				},
				error: function(xhr, status, error) {
					// 请求失败时的回调函数
					alert(error);
				}
			});
		</script>
	</body>
</html>
